<template>
  <div class="dashboard-editor-container">
    <div class="main-container1">
      <div class="clearfix">
        <!--eslint-disable-->
        <img :src="logo" alt="Logo" class="logo-image" />
      </div>
      <div class="clearfix">
        <div class="description">
          <div class="flex-container">
            <div class="image-container">
              <img :src="jifang" alt="Logo" class="logo-image" />
            </div>
            <p class="blue-themed-title logo-image">
              计算机实验教学中心是为了提升学生计算机技能和实践能力而设立的教学机构。中心配备先进的计算机设备和软件工具，提供学生进行计算机实验和项目开发的场所和支持。教学中心拥有专业的教师团队，他们致力于指导学生掌握计算机编程、网络技术、数据库管理等领域的知识和技能。
              在计算机实验教学中心，学生可以参与各种实验课程和项目实践，通过动手操作和实际项目开发，深化对计算机科学理论的理解，提升问题解决能力和团队合作精神。教学中心还定期举办计算机竞赛和技术讲座，为学生提供更广阔的学习平台和交流机会，激发学生的创新潜力和技术热情。
              计算机实验教学中心致力于培养具备扎实计算机基础知识和实践能力的优秀人才，为他们未来的职业发展和学术研究奠定坚实基础。欢迎广大学生积极参与计算机实验教学中心的各项活动，共同探索计算机科学的无限可能性！
            </p>
          </div>
        </div>
      </div>
      <div class="clearfix">
        <!-- Announcement and Duty Roster Sections -->
        <div class="container">
          <!-- Announcement Section -->
          <div class="box announcement">
            <h3>最新公告</h3>
            <p>欢迎来到机房管理系统。今日公告如下：</p>
            <ul>
              <li>
                机房A区将于今天下午2点至4点进行维护，请同学们提前保存好工作并合理安排时间。
              </li>
              <li>新购置的服务器已安装完毕，欢迎大家前来体验。</li>
            </ul>
          </div>

          <!-- Duty Roster Section -->
          <div class="box duty-roster">
            <h3>值班信息</h3>
            <el-table :data="dutyRoster" style="width: 100%">
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="phone" label="电话"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/logo/logo.jpg'
import jifang from '@/assets/jifang/首页机房照片.png'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      logo,
      jifang,
      emptyGif:
        'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3',
      dutyRoster: [
        // Sample duty roster data
        { name: '石伟凡', phone: '123-456-7890' },
        { name: '王万泽', phone: '987-654-3210' }
        // Add more entries as needed
      ]
    }
  },
  computed: {
    ...mapGetters(['name', 'avatar', 'roles'])
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: space-between;
}
.main-container1 {
  margin-left: 0px;
  transform: scale(1); /* 初始缩放比例 */
  transition: transform 0.3s ease; /* 缩放动画 */
}

.image-container {
  width: 40%; /* 设置容器宽度为40% */
  padding-bottom: 0%; /* 设置容器的高度为40%，保持宽高比 */
  position: relative; /* 为图片定位做准备 */
  margin-right: 20px; /* 如果需要，为容器添加右边距 */
}
.flex-container {
  display: flex; /* 启用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
}

.logo-image {
  width: 100%; /* 根据实际Logo大小调整 */
  display: block;
  margin: 0 auto;
  animation: float 5s infinite ease-in-out;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animated {
  animation-duration: 0.00001s;
  animation-fill-mode: both;
}

.pulse {
  animation-name: pulse-animation;
  animation-iteration-count: infinite;
}

@keyframes pulse-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.blue-themed-title {
  text-indent: 2em;
  /* 字体样式 */
  font-family: "Arial", sans-serif; /* 字体 */
  font-size: 16px; /* 字体大小 */

  /* 颜色和背景 */
  color: #121212; /* 文字颜色，白色 */
  background: linear-gradient(to right, #95bad3, #7fc5f4); /* 背景渐变，蓝色 */

  /* 间距和对齐 */
  padding: 10px 20px; /* 内边距 */
  margin: 5px 0; /* 外边距 */
  line-height: 1.4; /* 行高 */

  /* 边框和形状 */
  border-radius: 5px; /* 圆角 */
  display: inline-block; /* 使边框和圆角生效 */
  position: relative; /* 为伪元素定位 */
}
.clearfix {
  width: 100%; /* 盒子宽度 */
  max-width: 1100px; /* 最大宽度，根据需要调整 */
  margin: -20px auto; /* 水平居中 */
  padding: 30px; /* 内边距 */
  box-sizing: border-box; /* 包含padding和border在内 */
  background-color: #f7f7f7; /* 背景颜色 */
  border-radius: 8px; /* 圆角边框 */
}
.emptyGif {
  display: block;
  width: 35%;
  margin: 0 auto;
}

.box {
  width: 48%; /* 子盒子宽度 */
  background-color: #f7f7f7; /* 背景颜色 */
  padding: 20px; /* 内边距 */
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  margin-bottom: 20px; /* 底部外边距 */
}

.announcement {
  border-left: 5px solid #3498db; /* 左侧边框颜色为蓝色 */
}

.duty-roster {
  border-left: 5px solid #2ecc71; /* 左侧边框颜色为绿色 */
}

.box h3 {
  color: #34495e; /* 标题文字颜色 */
  margin-bottom: 15px; /* 标题下方的间隔 */
}

.box ul,
.box table {
  list-style: none; /* 移除列表和表格的默认样式 */
  width: 90%; /* 宽度为100% */
  margin-top: 10px; /* 上方间隔 */
}

.box ul li,
.box table tr {
  padding: 8px 0; /* 每项的上下内边距 */
  border-bottom: 1px solid #eaeaea; /* 每项下方的边框 */
}

.box ul li:last-child,
.box table tr:last-child {
  border-bottom: none; /* 最后一项不显示边框 */
}

.box table th,
.box table td {
  text-align: left; /* 表格内容左对齐 */
  padding: 8px; /* 表格单元格的内边距 */
}

.box table th {
  background-color: #3498db; /* 表头背景颜色为蓝色 */
  color: white; /* 表头文字颜色为白色 */
}
.dashboard-editor-container {
  background-color: #ffffff;
  min-height: 20vh;
  padding: 30px 20px 0px;
  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }
  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;
    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
